การเพิ่มประสิทธิภาพ React: เชี่ยวชาญการลดขนาด Bundle | MLOG | MLOG การเพิ่มประสิทธิภาพ React: เชี่ยวชาญการลดขนาด Bundle
ในแวดวงการพัฒนาเว็บปัจจุบัน ประสิทธิภาพคือสิ่งสำคัญที่สุด ผู้ใช้คาดหวังแอปพลิเคชันที่รวดเร็วและตอบสนองได้ดี และแอปพลิเคชัน React ที่โหลดช้าอาจนำไปสู่ประสบการณ์ผู้ใช้ที่ไม่ดี อัตราการตีกลับที่สูงขึ้น และท้ายที่สุดคือส่งผลเสียต่อธุรกิจของคุณ ปัจจัยที่สำคัญที่สุดอย่างหนึ่งที่ส่งผลต่อประสิทธิภาพของแอปพลิเคชัน React คือขนาดของ JavaScript bundle ของคุณ bundle ที่มีขนาดใหญ่อาจใช้เวลาดาวน์โหลด แยกวิเคราะห์ และรันนานขึ้น ส่งผลให้เวลาในการโหลดเริ่มต้นช้าลงและการโต้ตอบที่อืดอาด
คู่มือฉบับสมบูรณ์นี้จะเจาะลึกเทคนิคต่างๆ สำหรับการลดขนาด bundle ของแอปพลิเคชัน React ของคุณ ช่วยให้คุณส่งมอบประสบการณ์ผู้ใช้ที่รวดเร็ว มีประสิทธิภาพ และน่าพึงพอใจยิ่งขึ้น เราจะสำรวจกลยุทธ์ที่ใช้ได้กับโปรเจกต์ทุกขนาด ตั้งแต่แอปพลิเคชันหน้าเดียวขนาดเล็กไปจนถึงแพลตฟอร์มระดับองค์กรที่ซับซ้อน
ทำความเข้าใจขนาดของ Bundle
ก่อนที่เราจะลงลึกในเทคนิคการเพิ่มประสิทธิภาพ สิ่งสำคัญคือต้องเข้าใจว่าอะไรเป็นส่วนประกอบของขนาด bundle ของคุณและจะวัดผลได้อย่างไร โดยทั่วไป bundle ของคุณจะประกอบด้วย:
โค้ดของแอปพลิเคชัน: JavaScript, CSS และ asset อื่นๆ ที่คุณเขียนขึ้นสำหรับแอปพลิเคชันของคุณไลบรารีของบุคคลที่สาม: โค้ดจากไลบรารีภายนอกและ dependency ที่คุณใช้ เช่น ไลบรารี UI component, ฟังก์ชัน tiện ích และเครื่องมือจัดการข้อมูลโค้ดของเฟรมเวิร์ก: โค้ดที่จำเป็นสำหรับ React เอง พร้อมกับไลบรารีที่เกี่ยวข้องเช่น React Router หรือ ReduxAssets: รูปภาพ, ฟอนต์ และ static assets อื่นๆ ที่ใช้โดยแอปพลิเคชันของคุณ
เครื่องมืออย่าง Webpack Bundle Analyzer, Parcel Visualizer และ Rollup Visualizer สามารถช่วยให้คุณเห็นภาพเนื้อหาของ bundle ของคุณและระบุส่วนที่มีขนาดใหญ่ที่สุดได้ เครื่องมือเหล่านี้สร้างแผนผัง treemap แบบโต้ตอบที่แสดงขนาดของแต่ละโมดูลและ dependency ใน bundle ของคุณ ทำให้ง่ายต่อการมองหาโอกาสในการเพิ่มประสิทธิภาพ เครื่องมือเหล่านี้เป็นพันธมิตรที่ขาดไม่ได้ในการแสวงหาแอปพลิเคชันที่เล็กและเร็วขึ้นของคุณ
เทคนิคการลดขนาด Bundle
ตอนนี้ เรามาสำรวจเทคนิคต่างๆ ที่คุณสามารถใช้เพื่อลดขนาด bundle ของแอปพลิเคชัน React ของคุณ:
1. Code Splitting
Code splitting คือกระบวนการแบ่งโค้ดของแอปพลิเคชันของคุณออกเป็นส่วนเล็กๆ (chunks) ที่สามารถโหลดได้ตามต้องการ แทนที่จะดาวน์โหลดทั้งแอปพลิเคชันในครั้งเดียว ผู้ใช้จะดาวน์โหลดเฉพาะโค้ดที่จำเป็นสำหรับหน้าจอแรกเท่านั้น เมื่อพวกเขานำทางไปยังส่วนต่างๆ ของแอปพลิเคชัน โค้ดส่วนเพิ่มเติมจะถูกโหลดแบบอะซิงโครนัส
React มีการรองรับ code splitting ในตัวโดยใช้คอมโพเนนต์ React.lazy() และ Suspense React.lazy() ช่วยให้คุณสามารถ import คอมโพเนนต์แบบไดนามิกได้ ในขณะที่ Suspense เป็นวิธีแสดง UI สำรองในขณะที่คอมโพเนนต์กำลังโหลด
ตัวอย่าง:
import React, { Suspense, lazy } from 'react';
const MyComponent = lazy(() => import('./MyComponent'));
function MyPage() {
return (
Loading... }>
);
}
export default MyPage;
Copy
ในตัวอย่างนี้ MyComponent จะถูกโหลดเมื่อจำเป็นเท่านั้น ซึ่งช่วยลดขนาด bundle เริ่มต้น ข้อความ "Loading..." จะแสดงขึ้นในขณะที่กำลังดึงข้อมูลคอมโพเนนต์
Route-Based Code Splitting: กรณีการใช้งานทั่วไปสำหรับ code splitting คือการแบ่งแอปพลิเคชันของคุณตาม routes สิ่งนี้ทำให้แน่ใจได้ว่าผู้ใช้จะดาวน์โหลดเฉพาะโค้ดที่จำเป็นสำหรับหน้าที่พวกเขากำลังดูอยู่เท่านั้น
ตัวอย่างการใช้กับ React Router:
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));
const Contact = lazy(() => import('./Contact'));
function App() {
return (
Loading... }>
);
}
export default App;
Copy
แต่ละ route ในตัวอย่างนี้จะโหลดคอมโพเนนต์ที่เกี่ยวข้องแบบ lazy ซึ่งช่วยปรับปรุงเวลาในการโหลดเริ่มต้นของแอปพลิเคชัน
2. Tree Shaking
Tree shaking เป็นเทคนิคที่กำจัดโค้ดที่ไม่ได้ใช้ (dead code) ออกจากแอปพลิเคชันของคุณ Dead code หมายถึงโค้ดที่ไม่เคยถูกใช้งานจริงในแอปพลิเคชันของคุณ แต่ยังคงรวมอยู่ใน bundle สิ่งนี้มักเกิดขึ้นเมื่อคุณ import ไลบรารีทั้งชุด แต่ใช้เพียงส่วนเล็กๆ ของฟังก์ชันการทำงานเท่านั้น
JavaScript bundler สมัยใหม่เช่น Webpack และ Rollup สามารถทำ tree shaking ได้โดยอัตโนมัติ เพื่อให้แน่ใจว่า tree shaking ทำงานได้อย่างมีประสิทธิภาพ สิ่งสำคัญคือต้องใช้ ES modules (ไวยากรณ์ import และ export) แทน CommonJS (ไวยากรณ์ require) ES modules ช่วยให้ bundler สามารถวิเคราะห์โค้ดของคุณแบบสแตติกและพิจารณาว่า export ใดถูกใช้งานจริง
ตัวอย่าง:
สมมติว่าคุณกำลังใช้ไลบรารี tiện ích ชื่อ lodash แทนที่จะ import ทั้งไลบรารี:
import _ from 'lodash';
_.map([1, 2, 3], (n) => n * 2);
Copy
ให้ import เฉพาะฟังก์ชันที่คุณต้องการ:
import map from 'lodash/map';
map([1, 2, 3], (n) => n * 2);
Copy
วิธีนี้จะทำให้แน่ใจได้ว่ามีเพียงฟังก์ชัน map เท่านั้นที่รวมอยู่ใน bundle ของคุณ ซึ่งช่วยลดขนาดลงได้อย่างมาก
3. Dynamic Imports
คล้ายกับ React.lazy(), dynamic imports (โดยใช้ไวยากรณ์ import()) ช่วยให้คุณโหลดโมดูลได้ตามต้องการ ซึ่งมีประโยชน์สำหรับการโหลดไลบรารีขนาดใหญ่หรือคอมโพเนนต์ที่จำเป็นในสถานการณ์เฉพาะเท่านั้น
ตัวอย่าง:
async function handleClick() {
const module = await import('./MyLargeComponent');
const MyLargeComponent = module.default;
// Use MyLargeComponent
}
Copy
ในตัวอย่างนี้ MyLargeComponent จะถูกโหลดเมื่อฟังก์ชัน handleClick ถูกเรียกใช้เท่านั้น ซึ่งโดยทั่วไปจะเป็นการตอบสนองต่อการกระทำของผู้ใช้
4. การย่อขนาด (Minification) และการบีบอัด (Compression)
Minification คือการลบอักขระที่ไม่จำเป็นออกจากโค้ดของคุณ เช่น ช่องว่าง, คอมเมนต์ และตัวแปรที่ไม่ได้ใช้ Compression คือการลดขนาดโค้ดของคุณโดยใช้อัลกอริทึมที่ค้นหารูปแบบและแสดงผลอย่างมีประสิทธิภาพมากขึ้น
เครื่องมือ build สมัยใหม่ส่วนใหญ่ เช่น Webpack, Parcel และ Rollup มีการรองรับ minification และ compression ในตัว ตัวอย่างเช่น Webpack ใช้ Terser สำหรับ minification และสามารถกำหนดค่าให้ใช้ Gzip หรือ Brotli สำหรับ compression ได้
ตัวอย่าง (การตั้งค่า Webpack):
const TerserPlugin = require('terser-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
// ...
optimization: {
minimize: true,
minimizer: [new TerserPlugin()],
},
plugins: [
new CompressionPlugin({
algorithm: 'gzip',
test: /\.(js|css)$/,
threshold: 10240,
minRatio: 0.8,
}),
],
};
Copy
การตั้งค่านี้เปิดใช้งาน minification โดยใช้ Terser และ compression โดยใช้ Gzip ตัวเลือก threshold จะระบุขนาดขั้นต่ำ (เป็นไบต์) ที่ไฟล์จะถูกบีบอัด
5. การเพิ่มประสิทธิภาพรูปภาพ
รูปภาพมักเป็นส่วนสำคัญที่ทำให้ขนาด bundle ของแอปพลิเคชันของคุณใหญ่ขึ้น การเพิ่มประสิทธิภาพรูปภาพของคุณสามารถปรับปรุงประสิทธิภาพได้อย่างมาก
เทคนิคการเพิ่มประสิทธิภาพรูปภาพ:
เลือกรูปแบบที่เหมาะสม: ใช้ JPEG สำหรับภาพถ่าย, PNG สำหรับภาพที่มีความโปร่งใส และ WebP สำหรับการบีบอัดและคุณภาพที่เหนือกว่าบีบอัดรูปภาพ: ใช้เครื่องมืออย่าง ImageOptim, TinyPNG หรือ Compressor.io เพื่อลดขนาดไฟล์ของรูปภาพโดยไม่สูญเสียคุณภาพมากเกินไปใช้รูปภาพที่ปรับขนาดตามหน้าจอ (responsive images): แสดงขนาดรูปภาพที่แตกต่างกันตามขนาดหน้าจอของผู้ใช้ แอตทริบิวต์ srcset ในแท็ก <img> ช่วยให้คุณสามารถระบุแหล่งที่มาของรูปภาพได้หลายแหล่งและให้เบราว์เซอร์เลือกอันที่เหมาะสมที่สุดLazy load รูปภาพ: โหลดรูปภาพเฉพาะเมื่อปรากฏใน viewport เท่านั้น ซึ่งสามารถปรับปรุงเวลาในการโหลดเริ่มต้นได้อย่างมาก โดยเฉพาะสำหรับหน้าที่มีรูปภาพจำนวนมาก ใช้แอตทริบิวต์ loading="lazy" บนแท็ก <img>ใช้ CDN: Content Delivery Networks (CDNs) จัดเก็บรูปภาพของคุณบนเซิร์ฟเวอร์ทั่วโลก ทำให้ผู้ใช้สามารถดาวน์โหลดจากเซิร์ฟเวอร์ที่ใกล้ที่สุดได้ ซึ่งสามารถลดเวลาในการดาวน์โหลดได้อย่างมาก
6. เลือกไลบรารีอย่างชาญฉลาด
ประเมินไลบรารีที่คุณใช้ในแอปพลิเคชันของคุณอย่างรอบคอบ ไลบรารีบางตัวอาจมีขนาดใหญ่มาก แม้ว่าคุณจะใช้เพียงส่วนเล็กๆ ของฟังก์ชันการทำงานก็ตาม ลองพิจารณาใช้ไลบรารีที่มีขนาดเล็กและเฉพาะทางมากขึ้นซึ่งมีเฉพาะฟีเจอร์ที่คุณต้องการ
ตัวอย่าง:
แทนที่จะใช้ไลบรารีการจัดรูปแบบวันที่ขนาดใหญ่อย่าง Moment.js ลองพิจารณาใช้ทางเลือกที่เล็กกว่าเช่น date-fns หรือ Day.js ไลบรารีเหล่านี้มีขนาดเล็กกว่าอย่างเห็นได้ชัดและให้ฟังก์ชันการทำงานที่คล้ายกัน
เปรียบเทียบขนาด Bundle:
Moment.js: ~240KB (minified และ gzipped)
date-fns: ~70KB (minified และ gzipped)
Day.js: ~7KB (minified และ gzipped)
7. HTTP/2
HTTP/2 เป็นเวอร์ชันใหม่ของโปรโตคอล HTTP ที่มีการปรับปรุงประสิทธิภาพหลายอย่างเหนือกว่า HTTP/1.1 ได้แก่:
Multiplexing: อนุญาตให้ส่งคำขอหลายรายการผ่านการเชื่อมต่อ TCP เดียวHeader Compression: ลดขนาดของ HTTP headersServer Push: อนุญาตให้เซิร์ฟเวอร์ส่งทรัพยากรไปยังไคลเอ็นต์เชิงรุกก่อนที่จะมีการร้องขอ
การเปิดใช้งาน HTTP/2 บนเซิร์ฟเวอร์ของคุณสามารถปรับปรุงประสิทธิภาพของแอปพลิเคชัน React ของคุณได้อย่างมาก โดยเฉพาะเมื่อต้องจัดการกับไฟล์ขนาดเล็กจำนวนมาก เว็บเซิร์ฟเวอร์และ CDN สมัยใหม่ส่วนใหญ่รองรับ HTTP/2
8. การแคชของเบราว์เซอร์ (Browser Caching)
Browser caching ช่วยให้เบราว์เซอร์สามารถจัดเก็บ static assets (เช่น รูปภาพ, ไฟล์ JavaScript และไฟล์ CSS) ไว้ในเครื่องได้ เมื่อผู้ใช้กลับมาที่แอปพลิเคชันของคุณอีกครั้ง เบราว์เซอร์สามารถดึง assets เหล่านี้จากแคชแทนที่จะดาวน์โหลดซ้ำ ซึ่งช่วยลดเวลาในการโหลดได้อย่างมาก
กำหนดค่าเซิร์ฟเวอร์ของคุณให้ตั้งค่า cache headers ที่เหมาะสมสำหรับ static assets ของคุณ header Cache-Control เป็นสิ่งที่สำคัญที่สุด มันช่วยให้คุณสามารถระบุระยะเวลาที่เบราว์เซอร์ควรแคช asset
ตัวอย่าง:
Cache-Control: public, max-age=31536000
Copy
header นี้บอกให้เบราว์เซอร์แคช asset เป็นเวลาหนึ่งปี
9. Server-Side Rendering (SSR)
Server-side rendering (SSR) เกี่ยวข้องกับการเรนเดอร์คอมโพเนนต์ React ของคุณบนเซิร์ฟเวอร์และส่ง HTML เริ่มต้นไปยังไคลเอ็นต์ สิ่งนี้สามารถปรับปรุงเวลาในการโหลดเริ่มต้นและ SEO เนื่องจากเครื่องมือค้นหาสามารถรวบรวมข้อมูลเนื้อหา HTML ได้อย่างง่ายดาย
เฟรมเวิร์กอย่าง Next.js และ Gatsby ทำให้การใช้งาน SSR ในแอปพลิเคชัน React ของคุณเป็นเรื่องง่าย
ประโยชน์ของ SSR:
ปรับปรุงเวลาในการโหลดเริ่มต้น: เบราว์เซอร์ได้รับ HTML ที่เรนเดอร์ไว้ล่วงหน้า ทำให้สามารถแสดงเนื้อหาได้เร็วขึ้นSEO ที่ดีขึ้น: เครื่องมือค้นหาสามารถรวบรวมข้อมูลเนื้อหา HTML ได้อย่างง่ายดาย ซึ่งช่วยปรับปรุงอันดับของแอปพลิเคชันของคุณในเครื่องมือค้นหาประสบการณ์ผู้ใช้ที่ดียิ่งขึ้น: ผู้ใช้เห็นเนื้อหาเร็วขึ้น นำไปสู่ประสบการณ์ที่มีส่วนร่วมมากขึ้น10. Memoization
Memoization เป็นเทคนิคในการแคชผลลัพธ์ของการเรียกใช้ฟังก์ชันที่มีค่าใช้จ่ายสูงและนำกลับมาใช้ใหม่เมื่อมีอินพุตเดียวกันเกิดขึ้นอีกครั้ง ใน React คุณสามารถใช้ React.memo() ซึ่งเป็น higher-order component เพื่อ memoize functional components สิ่งนี้จะช่วยป้องกันการ re-render ที่ไม่จำเป็นเมื่อ props ของคอมโพเนนต์ไม่มีการเปลี่ยนแปลง
ตัวอย่าง:
import React from 'react';
const MyComponent = React.memo(function MyComponent(props) {
// Render component
return {props.data}
;
});
export default MyComponent;
Copy
ในตัวอย่างนี้ MyComponent จะ re-render ก็ต่อเมื่อ prop props.data เปลี่ยนแปลงเท่านั้น คุณยังสามารถระบุฟังก์ชันเปรียบเทียบที่กำหนดเองให้กับ React.memo() ได้หากคุณต้องการควบคุมมากขึ้นว่าเมื่อใดที่คอมโพเนนต์ควร re-render
ตัวอย่างในโลกแห่งความเป็นจริงและข้อควรพิจารณาในระดับสากล
หลักการของการลดขนาด bundle นั้นเป็นสากล แต่การนำไปใช้อาจแตกต่างกันไปขึ้นอยู่กับบริบทเฉพาะของโปรเจกต์และกลุ่มเป้าหมายของคุณ นี่คือตัวอย่างบางส่วน:
แพลตฟอร์มอีคอมเมิร์ซในเอเชียตะวันออกเฉียงใต้: สำหรับแพลตฟอร์มอีคอมเมิร์ซที่กำหนดเป้าหมายผู้ใช้ในเอเชียตะวันออกเฉียงใต้ ซึ่งความเร็วของข้อมูลมือถืออาจช้ากว่าและค่าใช้จ่ายข้อมูลสูงกว่า การเพิ่มประสิทธิภาพขนาดรูปภาพและการใช้ code splitting อย่างจริงจังจึงเป็นสิ่งสำคัญ พิจารณาใช้รูปภาพ WebP และ CDN ที่มีเซิร์ฟเวอร์ตั้งอยู่ในภูมิภาค การ lazy loading รูปภาพสินค้าก็มีความสำคัญเช่นกันแอปพลิเคชันเพื่อการศึกษาสำหรับละตินอเมริกา: แอปพลิเคชันเพื่อการศึกษาที่กำหนดเป้าหมายนักเรียนในละตินอเมริกาอาจได้รับประโยชน์จาก server-side rendering (SSR) เพื่อให้แน่ใจว่าเวลาในการโหลดเริ่มต้นรวดเร็วบนอุปกรณ์รุ่นเก่า การใช้ไลบรารี UI ที่มีขนาดเล็กและเบาก็สามารถลดขนาด bundle ได้เช่นกัน นอกจากนี้ ควรพิจารณาด้าน internationalization (i18n) ของแอปพลิเคชันของคุณอย่างรอบคอบ ไลบรารี i18n ขนาดใหญ่อาจเพิ่มขนาด bundle ได้อย่างมาก สำรวจเทคนิคต่างๆ เช่น การโหลดข้อมูลเฉพาะภาษา (locale) แบบไดนามิกแอปพลิเคชันบริการทางการเงินสำหรับยุโรป: แอปพลิเคชันบริการทางการเงินที่กำหนดเป้าหมายผู้ใช้ในยุโรปจำเป็นต้องให้ความสำคัญกับความปลอดภัยและประสิทธิภาพ แม้ว่า SSR จะสามารถปรับปรุงเวลาในการโหลดเริ่มต้นได้ แต่ก็จำเป็นต้องแน่ใจว่าข้อมูลที่ละเอียดอ่อนจะไม่ถูกเปิดเผยบนเซิร์ฟเวอร์ ให้ความสนใจอย่างใกล้ชิดกับขนาด bundle ของไลบรารีการสร้างกราฟและการแสดงข้อมูล เนื่องจากไลบรารีเหล่านี้มักมีขนาดค่อนข้างใหญ่แพลตฟอร์มโซเชียลมีเดียระดับโลก: แพลตฟอร์มโซเชียลมีเดียที่มีผู้ใช้ทั่วโลกจำเป็นต้องใช้กลยุทธ์ที่ครอบคลุมสำหรับการลดขนาด bundle ซึ่งรวมถึง code splitting, tree shaking, การเพิ่มประสิทธิภาพรูปภาพ และการใช้ CDN ที่มีเซิร์ฟเวอร์ในหลายภูมิภาค พิจารณาใช้ service worker เพื่อแคช static assets และให้การเข้าถึงแบบออฟไลน์
เครื่องมือและแหล่งข้อมูล
นี่คือเครื่องมือและแหล่งข้อมูลที่เป็นประโยชน์สำหรับการลดขนาด bundle:
Webpack Bundle Analyzer: เครื่องมือสำหรับแสดงภาพเนื้อหาของ Webpack bundle ของคุณParcel Visualizer: เครื่องมือสำหรับแสดงภาพเนื้อหาของ Parcel bundle ของคุณRollup Visualizer: เครื่องมือสำหรับแสดงภาพเนื้อหาของ Rollup bundle ของคุณGoogle PageSpeed Insights: เครื่องมือสำหรับวิเคราะห์ประสิทธิภาพของหน้าเว็บและระบุส่วนที่ต้องปรับปรุงWeb.dev Measure: เครื่องมืออีกตัวจาก Google ที่วิเคราะห์เว็บไซต์ของคุณและให้คำแนะนำที่นำไปปฏิบัติได้Lighthouse: เครื่องมือโอเพนซอร์สอัตโนมัติสำหรับปรับปรุงคุณภาพของหน้าเว็บ มีการตรวจสอบประสิทธิภาพ, การเข้าถึง, progressive web apps, SEO และอื่นๆBundlephobia: เว็บไซต์ที่ให้คุณตรวจสอบขนาดของแพ็คเกจ npm
สรุป
การลดขนาด bundle เป็นกระบวนการที่ต่อเนื่องซึ่งต้องให้ความสำคัญกับรายละเอียดอย่างรอบคอบ ด้วยการใช้เทคนิคที่ระบุไว้ในคู่มือนี้ คุณสามารถปรับปรุงประสิทธิภาพของแอปพลิเคชัน React ของคุณได้อย่างมากและมอบประสบการณ์ผู้ใช้ที่ดีขึ้น อย่าลืมวิเคราะห์ขนาด bundle ของคุณเป็นประจำและระบุส่วนที่ต้องปรับปรุง ประโยชน์ของ bundle ที่เล็กลง—เวลาในการโหลดที่เร็วขึ้น, การมีส่วนร่วมของผู้ใช้ที่ดีขึ้น และประสบการณ์โดยรวมที่ดีขึ้น—คุ้มค่ากับความพยายามอย่างแน่นอน
ในขณะที่แนวทางการพัฒนาเว็บยังคงพัฒนาอย่างต่อเนื่อง การติดตามเทคนิคและเครื่องมือล่าสุดสำหรับการลดขนาด bundle เป็นสิ่งสำคัญสำหรับการสร้างแอปพลิเคชัน React ที่มีประสิทธิภาพสูงซึ่งตอบสนองความต้องการของผู้ชมทั่วโลก